Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(ui-breadcrumb): add and update aria tags in Breadcrumb #1788

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

fix(ui-breadcrumb): add and update aria tags in Breadcrumb #1788

wants to merge 1 commit into from

Conversation

ToMESSKa
Copy link
Contributor

@ToMESSKa ToMESSKa commented Nov 22, 2024 •
edited
Loading

Closes: INSTUI-4268

ISSUES:

  • if the current page is represented as a link in the breadcrumb, it should have an aria-current attribute (https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/) - now breadcrumb doesn't have such attribute
  • the examples in the breadcrumb do not have descriptive aria-labels

TEST PLAN:

  • add the href="#" prop to the current element (College of Life Sciences) in the first example in Breadcrumb
  • the current element should now have an aria-current attribute in HTML
  • the examples in the breadcrumb should have descriptive aria-labels ("breadcrumb" instead of "you are here")

@ToMESSKa ToMESSKa self-assigned this Nov 22, 2024
@github-actions GitHub Actions
Copy link

PR Preview Action v1.4.8
🚀 Deployed preview to https://instructure.github.io/instructure-ui/pr-preview/pr-1788/
on branch gh-pages at 2024-11-22 13:14 UTC

matyasf
matyasf requested changes Nov 28, 2024
View reviewed changes
Copy link
Collaborator

@matyasf matyasf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See my comment. Also please write in the Readme in the DO section that the current location should always be the last element in the breadcrumb, this is not stated in the page explicitly

packages/ui-breadcrumb/src/Breadcrumb/index.tsx
return (
<li css={styles?.crumb} style={inlineStyle}>
{child}
{isLastElement && hasHref ? this.addAriaCurrent(child) : child}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As I understand we can always put this ARIA tag here.
From https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current "If the element representing the current page in the breadcrumb was not a link, the aria-current is optional.", lets put it always there. same in mdn's example: https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@matyasf matyasf matyasf requested changes

Requested changes must be addressed to merge this pull request.

Assignees

@ToMESSKa ToMESSKa

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@ToMESSKa @matyasf